<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
html, body {
				  height: 100%;
			}

			body {
				  background: radial-gradient(ellipse at center,  #34679a 0%,#214163 47%,#0d1926 100%);
			}

body > div { 
  position: absolute; 
  top: 12%; 
  left: 50%; 
  margin-left: -103px;
  width: 200px; 
  height: 200px; 
  border-radius: 50%; 
  border: 1px solid #fff;
  -webkit-transform-style: preserve-3d; 
  -webkit-transform: rotateX(80deg) rotateY(20deg);
  transform-style: preserve-3d; 
  transform: rotateX(80deg) rotateY(20deg);
}

body > div:first-of-type:after {
  content: "";
  position: absolute;
  height: 40px;
  width: 40px;
  background: #fff;
  border-radius: 50%;
  -webkit-transform: rotateX(-80deg) rotateY(0);
  transform: rotateX(-80deg) rotateY(0);
  box-shadow: 0 0 25px #fff;
  -webkit-animation: nucleus_ 2s infinite linear;
  animation: nucleus_ 2s infinite linear;
  left: 50%;
  top: 50%;
  margin-top: -20px;
  margin-left: -20px;
}

body > div:nth-of-type(2) {
  -webkit-transform: rotateX(-80deg) rotateY(20deg);
  transform: rotateX(-80deg) rotateY(20deg);
}

body > div:nth-of-type(3) {
  -webkit-transform: rotateX(-70deg) rotateY(60deg);
  transform: rotateX(-70deg) rotateY(60deg);
}

body > div:nth-of-type(4) {
  -webkit-transform: rotateX(70deg) rotateY(60deg);
  transform: rotateX(70deg) rotateY(60deg);
}

body > div > div {
  width: 200px;
  height: 200px;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -webkit-animation: trail_ 2s infinite linear;
  transform-style: preserve-3d;
  animation: trail_ 2s infinite linear;
}

body > div > div:after {
  content: ""; 
  position: absolute; 
  top: -5px; 
  box-shadow: 0 0 12px #fff;
  left: 50%; 
  margin-left: -5px; 
  width: 5px; 
  height: 5px; 
  border-radius: 50%;
  background-color: #fff;
  -webkit-animation: particle_ 2s infinite linear;
  animation: particle_ 2s infinite linear;
}

body > div:nth-of-type(2) > div,
body > div:nth-of-type(2) > div:after {
  -webkit-animation-delay: -.5s;
  animation-delay: -.5s;
}

body > div:nth-of-type(3)  > div,
body > div:nth-of-type(3)  > div:after {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

body > div:nth-of-type(4) > div,
body > div:nth-of-type(4) > div:after {
  -webkit-animation-delay: -1.5s;
  animation-delay: -1.5s;
}

@-webkit-keyframes trail_ { 
    from {
        -webkit-transform: rotateZ(0deg);
    } to {
        -webkit-transform: rotateZ(360deg);
    }
}

@keyframes trail_ { 
    from {
        transform: rotateZ(0deg);
    } to {
        transform: rotateZ(360deg);
    }
}

@-webkit-keyframes particle_ { 
    from {
        -webkit-transform: rotateX(90deg) rotateY(0deg); 
        transform: rotateX(90deg) rotateY(0deg); 
    } to {
      -webkit-transform: rotateX(90deg) rotateY(-360deg);  
        transform: rotateX(90deg) rotateY(-360deg); 
    } 
}


@keyframes particle_ { 
    from {
        transform: rotateX(90deg) rotateY(0deg); 
    } to { 
        transform: rotateX(90deg) rotateY(-360deg); 
    } 
}

@keyframes nucleus_ { 
    0% {
        box-shadow: 0 0 0 transparent;
    } 50% { 
        box-shadow: 0 0 25px #fff;
    } 100% { 
        box-shadow: 0 0 0 transparent;
    }
}

@-webkit-keyframes nucleus_ { 
    0% {
        box-shadow: 0 0 0 transparent;
    } 50% { 
        box-shadow: 0 0 25px #fff;
    } 100% { 
        box-shadow: 0 0 0 transparent;
    }
}

</style>
<body>

<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
</body>
</html>